<!--用户注册模块-->
<div class="regBoard" ng-controller="userReg">
    <form  name="regForm" ng-submit="processRegForm(regForm.$valid)" novalidate>
        <h3>用户注册 &nbsp;<small class="text-danger hide" id="errorInfo">邮箱格式不正确</small></h3>
        <div class="form-group">
            <input type="text" class="form-control"  name="userName" id="userName" ng-minlength="5" ng-maxlength="12" ng-model="regFormData.userName" ng-pattern="/^[a-zA-Z][a-zA-Z0-9_]{4,11}$/" placeholder="请输入用户名" required/>
            <label for="inputError" class="control-label text-danger" ng-show="regForm.userName.$invalid && !regForm.userName.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 用户名5-12个英文数字组合</label>
        </div>
        <div class="form-group">
            <input type="email" class="form-control" name="email" placeholder="请输入邮箱地址" ng-model="regFormData.email" ng-pattern="/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/" required/>
            <label for="inputError" class="control-label text-danger" ng-show="regForm.email.$invalid && !regForm.email.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 请填写正确的邮箱地址</label>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="userPassword" name="password" placeholder="请输入密码" ng-pattern="/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{5,}/" ng-maxlength="12" ng-model="regFormData.password" required/>
            <label for="inputError" class="control-label text-danger" ng-show="regForm.password.$invalid && !regForm.password.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 6-12位，只能包含字母、数字和下划线</label>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" pw-check="userPassword" name="confirmPassword" placeholder="请再次输入密码" ng-model="regFormData.confirmPassword" ng-pattern="/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{5,}/" ng-maxlength="12" required/>
            <label for="inputError" class="control-label text-danger" ng-show="regForm.confirmPassword.$invalid && !regForm.confirmPassword.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 两次输入的密码不匹配</label>
        </div>
        <div>
            <button class="btn btn-default" role="button" ng-disabled="regForm.$invalid">提交</button>
        </div>
    </form>
</div>

<script>
    var doraApp = angular.module("webApp",[]);
    doraApp.controller("userReg",function($scope,$http) {

        $scope.processRegForm = function (isValid) {
            if (isValid) {
                $http({
                    method: 'POST',
                    url: "/users/doReg",
                    data: $.param($scope.regFormData),  // pass in data as strings
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
                })
                .success(function (data) {
                    if (data === "success") {
                        alert("注册成功,您现在可以登录")
                        window.location = "/"
                    } else {
                        $('#errorInfo').removeClass('hide').text(data)
                    }
                });
            }
        };

    })
    .directive('pwCheck', [function () {
        return {
            require: 'ngModel',
            link: function (scope, elem, attrs, ctrl) {
                var firstPassword = '#' + attrs.pwCheck;
                elem.add(firstPassword).on('keyup', function () {
                    scope.$apply(function () {
                        var v = elem.val()===$(firstPassword).val();
                        ctrl.$setValidity('pwmatch', v);
                    });
                });
            }
        }
    }]);
</script>